<template>
    <div class="rank">
        <van-collapse v-model="activeNames" class="nav">
            <van-collapse-item name="1">
                <div slot="title" class="slot">
                    <p>{{title}}</p>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-expandmore"></use>
                    </svg>
                </div>
                <div class="solt-list" v-for="(item,index) in soltList" :key="index" @click="checkList(item)">
                    <p>{{item.title}}</p>
                </div>
            </van-collapse-item>
        </van-collapse>
        <p class="p1">{{rankDate}}</p>
        <div class="ranm">
            <van-list
                    v-model="loading"
                    error-text="请求失败，点击重新加载"
                    finished-text="没有更多数据"
                    @load="onLoad"
                    :finished="finished"
            >
                <div class="item item-btline"
                     v-for="(item,index) in list"
                     :key="index"
                >
                    <img :src="item.avatar" v-if="category == 'earning' || category == 'month' || category == 'day'">
                    <div class="item-r">
                        <div class="itemt" v-if="category == 'earning' || category == 'month' || category == 'day'">
                            <p class="p1">{{item.name}}</p>
                            <p class="p2">ID：{{item.uid}}</p>
                        </div>
                        <div class="itemt" v-else-if="category=='province'">
                            <p class="p1">{{item.proname}}</p>
                        </div>
                        <div class="itemt" v-else-if="category=='system'">
                            <p class="p1">{{item.systemname}}</p>
                        </div>
                        <svg class="icon" aria-hidden="true" v-show="item.id===1">
                            <use xlink:href="#icon-jiangbei"></use>
                        </svg>
                        <div class="itemr">
                            <p class="p1">{{item.id}}</p>
                            <p class="p2">排名</p>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="bot-p" v-if="category == 'earning' || category == 'day' || category == 'month'">
            <div class="item">
                <p class="p1">我</p>
                <img :src="userInfo.avatar" alt="">
                <div class="item-r">
                    <div class="itemt">
                        <p class="p1">{{userInfo.nickname}}</p>
                        <p class="p2">ID：{{userInfo.uid}}</p>
                    </div>
                    <div class="itemr">
                        <p class="p1">{{ranking}}</p>
                        <p class="p2">排名</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bot-p" v-else-if="category == 'province'">
            <div class="item">
                <p class="p1">{{userInfo.province_name}}</p>
                <div class="item-r">
                    <div class="itemr " style="text-align: right;flex: 1;">
                        <p class="p1">{{ranking}}</p>
                        <p class="p2">排名</p>
                    </div>
                </div>
            </div>
        </div>
        <div v-else></div>

    </div>
</template>
<div>
</div>
<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import dayjs from 'dayjs';
    import API from '../../request/api';

    export default {
        /**
         * 排行榜
         */
        name: 'rankList',
        components: {InfiniteLoading},
        data() {
            return {
                page: 0,
                rankDate: dayjs(new Date).format('YYYY年MM月DD日HH时前排行'),
                ranking: '',
                list: [],
                loading: false,
                finished: false,
                userInfo: this.$store.state.login.userInfo,
                activeNames: ['0'],
                soltList: [
                    {title: '总排行', category: 'earning'},
                    {title: '个人收入日排行', category: 'day'},
                    {title: '个人收入月排行', category: 'month'},
                    {title: '省代营业排行', category: 'province'},
                    {title: '系统业绩排行', category: 'system'}
                ],
                category: 'earning',
                title: '总排行'
            };
        },
        created() {
            this.checkList({title: '总排行', category: 'earning'});

        },
        methods: {
            load() {
                this.request.get(API.rankList, {type: 'myself', category: this.category}).then((res) => {
                    this.ranking = res.list[0].id;
                });
            },
            checkList(item) {
                // 选择排行类型
                this.title = item.title;
                this.category = item.category;
                this.activeNames = [''];
                //    拉取对应的数据
                this.page = 0;
                this.list = [];
                this.finished = false;
                this.onLoad();
                this.load();
            },
            onLoad() {
                // 异步更新数据
                if (this.finished === false) {
                    this.finished = true;
                    this.request.get(API.rankList, {page: this.page, category: this.category}).then((res) => {
                        for (let index in res.list) {
                            this.list.push(res.list[index]);
                        }
                        // 加载状态结束
                        this.loading = false;
                        // 数据全部加载完成
                        if (res.list.length < 10) {
                            this.finished = true;
                            this.loading = false;
                        } else {
                            this.finished = false;
                        }
                        if (this.category == 'province' || this.category == 'system') {
                            // 没有分页
                            this.finished = true;
                        }
                        this.page++;
                    });
                }
            }
        },

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .rank {
        flex-y()

        .nav {
            width 100vw

            .slot {
                flex-x(center)
                height vw(44)

                p {
                    padding-right 2vw
                    word-vw(14px, gray3)
                }

                .icon {
                    width vw(12)
                }
            }

            .solt-list {
                p {
                    text-align center
                    line-height vw(42)
                    word-vw(14px, gray3)
                    border-bottom 1px solid gray5
                }
            }
        }

        .p1 {
            word-vw(12px, gray3)
            line-height 3
        }

        .ranm {
            background white
            width 100%
            box-sizing border-box
            margin-bottom 15vw

            .item {
                flex-x()
                height vw(55)

                img {
                    width vw(40)
                    height vw(40)
                    margin-left cellPadding
                }

                .item-r {
                    flex: 1
                    flex-x()
                    margin-left cellPadding

                    .icon {
                        width vw(19)
                        height vw(22)
                    }

                    .itemt {
                        flex 1

                        .p1 {
                            word-vw(12px, gray3)
                            line-height 1.6
                        }

                        .p2 {
                            word-vw(12px, gray9)
                        }

                    }

                    .itemr {
                        margin-right cellPadding

                        .p1 {
                            word-vw(18px, gray3)
                            line-height 1.6
                        }

                        .p2 {
                            word-vw(12px, gray9)
                        }

                    }

                }
            }

            .item-btline {
                border-bottom 10px solid gray5
            }
        }

        .bot-p {
            position fixed
            bottom 0
            background white
            width 100%
            padding 0 cellPadding
            box-sizing border-box

            .item {
                flex-x()
                height vw(55)

                img {
                    width vw(40)
                    height vw(40)
                }

                .p1 {
                    padding-right 2vw
                }

                .item-r {
                    flex: 1
                    flex-x()
                    margin-left 2vw

                    .icon {
                        width vw(19)
                        height vw(22)
                    }

                    .itemt {
                        flex 1

                        .p1 {
                            word-vw(12px, gray3)
                            line-height 1.6
                        }

                        .p2 {
                            word-vw(12px, gray9)
                        }

                    }

                    .itemr {
                        .p1 {
                            word-vw(12px, gray3)
                            line-height 1.6
                        }

                        .p2 {
                            word-vw(12px, gray9)
                        }

                    }
                }
            }
        }

        >>> .van-cell__right-icon {
            opacity 0
        }

        >>> .van-collapse-item__content {
            padding 0
        }
    }
</style>
